<template>
  <BreadcrumbBar
    parent-label="Authority Management"
    child-label="User Management"
  ></BreadcrumbBar>

  <InputForm>
    <InputItem label="昵称">
      <el-input
        v-model="queryUserCondition.nickName"
        style="width: 100%; height: 100%"
        clearable
        placeholder="nickName"
      />
    </InputItem>
    <InputItem label="电话">
      <el-input
        v-model="queryUserCondition.phoneNumber"
        style="width: 100%; height: 100%"
        clearable
        :minlength="3"
        placeholder="phoneNumber"
      />
    </InputItem>
    <InputItem label="邮箱">
      <el-input
        v-model="queryUserCondition.email"
        style="width: 100%; height: 100%"
        clearable
        :minlength="3"
        placeholder="email"
      />
    </InputItem>
    <InputItem label="状态">
      <el-select
        v-model="queryUserCondition.enable"
        placeholder="Select Status"
        size="large"
        clearable
      >
        <el-option label="启用" value="0" />
        <el-option label="禁用" value="1" />
      </el-select>
    </InputItem>
    <InputItem label="角色">
      <el-input
        v-model="queryUserCondition.roleName"
        style="width: 100%; height: 100%"
        clearable
        placeholder="roleName"
      />
    </InputItem>

    <ButtomItem label="操作">
      <el-button
        style="height: 100%"
        v-once-click
        color="#626aef"
        plain
        :icon="Search"
        @click="queryPageUserList"
      >
        条件查询
      </el-button>
      <el-button
        style="height: 100%"
        v-once-click
        color="#626aef"
        plain
        :icon="Refresh"
        @click="resetQuery"
      >
        重置查询
      </el-button>

      <DesensitizeDataVerify
        @success-handler="queryPageUserList"
      ></DesensitizeDataVerify>
    </ButtomItem>
  </InputForm>

  <!-- 用户表格 -->
  <TableCard
    operationBarLabel="批量操作用户"
    :show-expand="50"
    :table-max-height="400"
  >
    <template v-slot:operationBar>
      <el-button
        v-once-click
        color="#626aef"
        plain
        size="small"
        @click="setUserStatus(multipleSelectionItems, 0)"
      >
        启用
      </el-button>
      <el-button
        v-once-click
        type="info"
        size="small"
        @click="setUserStatus(multipleSelectionItems, 1)"
      >
        禁用
      </el-button>
    </template>

    <template v-slot:table="{ maxHeight }">
      <el-table
        :data="queryUserList"
        stripe
        style="width: 100%"
        :max-height="maxHeight"
        @selection-change="handleSelectionChange"
        :headerCellStyle="tableHeaderCellStyle"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column property="enable" label="Enable" width="80">
          <template #default="scope">
            <el-tag v-if="scope.row.enable === 1" type="danger"> 禁用 </el-tag>
            <el-tag v-if="scope.row.enable === 0" type="success"> 启用 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          property="account"
          label="Account"
          sortable
          min-width="120"
        />
        <el-table-column property="nickname" label="Nickname" min-width="120" />
        <el-table-column
          property="phoneNumber"
          label="PhoneNumber"
          width="220"
        />
        <el-table-column property="email" label="Email" width="220" />
        <el-table-column
          property="createTime"
          label="CreateTime"
          width="190"
          sortable
        />
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-button
              v-once-click
              color="#626aef"
              plain
              size="small"
              @click="openSetRoleDialogHandldr(scope.row)"
            >
              设置角色
            </el-button>
            <el-button
              v-once-click
              type="info"
              size="small"
              v-if="scope.row.enable === 0"
              @click="setUserStatus([scope.row.id], 1)"
            >
              禁用
            </el-button>
            <el-button
              v-once-click
              color="#626aef"
              plain
              size="small"
              v-if="scope.row.enable === 1"
              @click="setUserStatus([scope.row.id], 0)"
            >
              启用
            </el-button>
            <el-button v-once-click color="#E6A23C" plain size="small">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template v-slot:paginationBar>
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :background="true"
        :total="userTotal"
        :page-sizes="[20, 30, 40, 50, 60]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
      />
    </template>
  </TableCard>

  <!--  -->
  <!-- 设置用户角色 -->
  <SetUserRoles
    :userInfo="settingUser"
    :visible="setRoleDialogVisible"
    @closeDialogHandler="closeSetRoleDialogHandldr"
  ></SetUserRoles>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Refresh, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { useThemeStore } from '@/features/store/store'
import { useMessageAlertStore } from '@/features/store/componentStore'
import { queryPageUserListApi, setUserStatusApi } from '@/request/api/user'

import SetUserRoles from './components/SetUserRoles.vue'
import DesensitizeDataVerify from '@/components/DesensitizeDataVerify/DesensitizeDataVerify.vue'
import InputForm from '@/components/InputForm/InputForm.vue'
import InputItem from '@/components/InputForm/InputItem.vue'
import ButtomItem from '@/components/InputForm/ButtomItem.vue'
import TableCard from '@/components/TableCard/TableCard.vue'
import BreadcrumbBar from '@/components/BreadcrumbBar/BreadcrumbBar.vue'

const { tableHeaderCellStyle } = useThemeStore()
const { openAlert } = useMessageAlertStore()

onMounted(() => {
  queryPageUserList()
})

const userTotal = ref<number>(0)
const pageNum = ref<number>(1)
const pageSize = ref<number>(20)
const handlePageNumChange = (val: number) => {
  pageNum.value = val
  queryPageUserList()
}
const handlePageSizeChange = (val: number) => {
  pageSize.value = val
  queryPageUserList()
}

// 查询用户的条件
const queryUserCondition = ref<QueryUserConditionItf>({
  roleName: null,
  account: null,
  nickName: null,
  phoneNumber: null,
  email: null,
  enable: null,
})
// 查询到的用户列表
const queryUserList = ref<UserInfoItf[]>([])

// 获取用户列表
const queryPageUserList = async () => {
  const res = await queryPageUserListApi(
    pageNum.value,
    pageSize.value,
    queryUserCondition.value
  )
  if (res.code !== 200) return openAlert.error(res.message)

  // ElMessage.success('查询用户成功')
  queryUserList.value = res.data.records
  userTotal.value = res.data.total
}
// 重置查询
const resetQuery = () => {
  queryUserCondition.value = {
    roleName: null,
    account: null,
    nickName: null,
    phoneNumber: null,
    email: null,
    enable: null,
  }
  queryPageUserList()
}

// 多选用户选项
const multipleSelectionItems = ref<string[]>([])
const handleSelectionChange = (val: UserInfoItf[]) => {
  let ids: string[] = []
  for (let item of val) ids.push(item.id)
  multipleSelectionItems.value = ids
}

// 设置用户状态
const setUserStatus = async (ids: string[], status: 0 | 1) => {
  const res = await setUserStatusApi(ids, status)
  if (res.code !== 200) return openAlert.error(res.message)

  ElMessage.success('设置用户状态成功')
  queryPageUserList()
}

// 正在进行设置的用户
const settingUser = ref<UserInfoItf>(null)
// 设置用户权限弹窗
const setRoleDialogVisible = ref<boolean>(false)

const openSetRoleDialogHandldr = (user: UserInfoItf) => {
  settingUser.value = user
  setRoleDialogVisible.value = true
}
const closeSetRoleDialogHandldr = () => {
  settingUser.value = null
  setRoleDialogVisible.value = false
}
</script>

<style lang="less" scoped></style>
